<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="demo" index="1" class="nav"></div>
    <input id="q" name="w" value="r">
    <script>
        /*
           自定义属性的操作：
               1.对象的属性的读取     对象名.属性名
               2.underfined     对象名.属性名   只读取系统给定的属性，不能读取自定义属性。
               3. 对象名.getAttribute('属性名')       可以对自定义属性和系统属性的读取
                4. 对象名.setAttribute('属性名', 值);  可以对自定义属性和系统属性的赋值
                5. 对象名.removeAttribute('属性名');   可以对自定义属性和系统属性的移除

        */
        var div = document.querySelector('div');
        console.log(div);
        // 对象属性的读取
        console.log(div.id);
        // undefined
        console.log(div.index);
        console.log(div.getAttribute('index'));
        console.log(div.getAttribute('id'));

        console.log('----------------------------------');
        div.setAttribute('index', 'index1');
        div.setAttribute('id','demolll');
        console.log('*******************************************');
        div.removeAttribute('index');
        div.removeAttribute('id');
    </script>
</body>
</html>